<template>
	<view class="warp solid-top">
		<!-- 页面加载 start -->
		<fu-loading v-if="isShowLoading"></fu-loading>
		<!-- 页面加载 end -->
		<view class="" v-else>
			<!-- 平台公告 -->
			<view class="list padding-lr flex align-center" @tap='handleJump'
				data-url="/pages/service-message/message/message-system/index?name=平台">
				<view class="consult_pic flex fu-block-90 radius-50 margin-right-sm">
					<fu-image src="../../static/001.png" :mode="'aspectFill'" class="fu-block-90 radius-50">
					</fu-image>
					<text class="badge"
						v-if="systemInfo && systemInfo.num > 0">{{ systemInfo.num > 99 ? '•••' : systemInfo.num }}</text>
				</view>
				<view class="solid-bottom padding-tb flex-sub" style="min-width: 1px;">
					<view class="flex align-center justify-between">
						<text class="text-333">{{ systemInfo.name }}</text>
						<text
							class="text-666 fu-fs24 text-999">{{ (systemInfo.new_msg[0] && systemInfo.new_msg[0].create_time) || '' }}</text>
					</view>
					<view class="text-cut fu-fs24 margin-top-xs text-999">
						{{ systemInfo.new_msg[0] && systemInfo.new_msg[0].content ? systemInfo.new_msg[0].content : i18n['暂无新消息'] }}
					</view>
				</view>
			</view>
			<!-- 客服消息   基础班没有客服-->
			<!-- <view class="list" v-if="chatMessage!=''" @tap='handleJump' data-url='//pages/service-message/service/service-detail/index'>
				<view class="consult_pic">
					<image :src="chatMessage.new_msg[0].thumb" mode="aspectFill"></image>
					<text class="badge"
						v-if="chatMessage.num > 0">{{ chatMessage.num > 99 ? '•••' : chatMessage.num }}</text>
				</view>
				<view class="consult solid-bottom">
					<view class="">
						<text class="title">{{ chatMessage.name }}</text>
						<text
							class="title">{{ (chatMessage.new_msg[0] && chatMessage.new_msg[0].create_time) || '' }}</text>
					</view>
					<jyf-parser class="text-cut" :html="chatMessage.new_msg[0] && chatMessage.new_msg[0].content ? chatMessage.new_msg[0].content : i18n['暂无新消息'] | contentFilter"></jyf-parser>
				</view>
			</view> -->
			<!-- 消息分类 start -->
			<view class="list padding-lr flex align-center" v-if="userInfo&&userInfo.run_type==2"
				v-for="(item, index) in list" :key="index" @click="handleRoute(item)">
				<view class="consult_pic fu-block-90 radius-50 margin-right-sm">
					<fu-image src="../../static/003.png" :mode="'aspectFill'" class="fu-block-90 radius-50">
					</fu-image>
					<text class="badge" v-if="item && item.num > 0">{{ item.num > 99 ? '•••' : item.num }}</text>
				</view>
				<view class="solid-bottom padding-tb flex-sub" style="min-width: 1px;">
					<view class="flex align-center justify-between">
						<text class="text-333">{{ item.name }}</text>
						<text class="text-666 fu-fs24 text-999">{{ (item.new_msg[0] && item.new_msg[0].create_time) || '' }}</text>
					</view>
					<view class="text-cut fu-fs24 text-999 margin-top-xs">
						{{ item.new_msg[0] && item.new_msg[0].content ? item.new_msg[0].content : i18n['暂无新消息'] }}
					</view>
				</view>
			</view>
			<!-- 消息分类 end -->
		</view>
		<!-- 网络检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络检测 end -->
	</view>
</template>

<script>
	import richText from "@/common/utils/richText.js";
	export default {
		data() {
			return {
				isShowLoading: true, //页面加载loading
				list: [], //消息分类列表
				isInit: true,
				imgWechatUrl: this.imgWechatUrl,
				systemInfo: '', //平台公告
				chatMessage: '', //客服消息
				typeImgUrlList: [{
						url: this.imgWechatUrl + 'service-message/001.png',
						name: global.i18n['系统通知'],
						msg_type: 1
					},
					{
						url: this.imgWechatUrl + 'service-message/002.png',
						name: global.i18n['物流信息'],
						msg_type: 4
					},
					{
						url: this.imgWechatUrl + 'service-message/003.png',
						name: global.i18n['订单信息'],
						msg_type: 2
					},
					{
						url: this.imgWechatUrl + 'service-message/004.png',
						name: global.i18n['其他消息'],
						msg_type: 3
					},
					{
						url: this.imgWechatUrl + 'service-message/005.png',
						name: global.i18n['平台客服'],
						msg_type: 5
					}
				]
			};
		},
		computed: {
			// 用户信息
			userInfo() {
				return this.$store.getters.userInfo;
			},
		},
		onLoad() {
			this.setNavigationBarTitle(this.i18n['系统消息'])
			/* 获取设备ID用作消息推送 start */
			// #ifdef APP-PLUS    
			let client_id = plus.push.getClientInfo().clientid;
			console.log('设备client_id：' + client_id);
			if (client_id) {
				this.$api
					.post(global.apiUrls.postUserSet_client_id, {
						client_id: client_id
					})
					.then(result => {
						console.log('设备储存', result);
						if (result.code == 1) {
							//更新为新的client_id
						}
					});
			}
			// #endif
			/* 获取设备ID end */
		},
		filters: {
			// filterUrl(val) {
			// 	let that = this
			// 	console.log(this.typeImgUrlList, 'that.typeImgUrlList');
			// 	return this.typeImgUrlList.filter(item => {
			// 		return item.msg_type == val
			// 	})[0].url
			// },
			contentFilter(val) {
				return richText.format(val);
			}
		},
		onShow() {
			if (global.userInfo && global.userInfo.run_type == 1) {
				this.setTabBarItem1();
			} else { //非入仓
				this.setTabBarItem();
			}
			if (global.token) {
				this.$store.dispatch('getCartList');
				this.gettype(this.isInit);
			}
		},
		methods: {
			handleRoute(item) {
				let type = Number(item.msg_type);
				if (type == 2) {
					//订单通知
					uni.navigateTo({
						url: '/pages/service-message/message/message-list/index?id=' + item.msg_type + '&name=' +
							item.name
					});
				} else if (type == 5) {
					this.$util.actionAuth(() => {
						this.$urouter.navigateTo({
							url: '/pages/service-message/service/service-detail/index'
						});
					});
				} else {
					//系统通知 和其他通知
					uni.navigateTo({
						url: '/pages/service-message/message/message-system/index?id=' + item.msg_type + '&name=' +
							item.name
					});
				}
			},

			/**
			 * @description   消息类型
			 */
			gettype(isInit = false) {
				//获取消息类型+最新消息
				if (isInit) {
					this.isShowLoading = true;
				}
				this.$api
					.get(global.apiUrls.getOperationGetSystemMsgType)
					.then(res => {
						this.isShowLoading = false;
						this.isInit = false;
						if (res.data.code == 1) {
							res.data.data.message.map(item => {
								this.typeImgUrlList.map(item1 => {
									if (item1.msg_type == item.msg_type) {
										item.url = item1.url
									}
								})
							})
							this.list = res.data.data.message;
							this.systemInfo = res.data.data.article;
							this.chatMessage = res.data.data.chat;
						} else {
							this.$message.info(res.msg);
						}
					})
					.catch(err => {
						this.isShowLoading = false;
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		font-size: 28upx;
		background: #f9f9f9;

		.warp {
			background: #fff;

			// 消息分类列表 start
			.list {
				.consult_pic {

					position: relative;


					.dian {
						width: 20upx;
						height: 20upx;
						display: inline-block;
						position: absolute;
						left: 60upx;
						top: -5px;
						background: $theme;
						border-radius: 50%;
					}
				}
			}

			// 消息分类列表 end
		}
	}

	// 角标 start
	.badge {
		position: absolute;
		top: -4rpx;
		right: -4rpx;
		width: 32rpx;
		height: 32rpx;
		border: 1px solid #FFFFFF;
		color: #ffffff;
		background: #FF6464;
		border-radius: 50%;
		font-size: 20rpx;
		text-align: center;
		line-height: 30rpx;
	}

	//角标 end
</style>